<template>
    <div class="login-wrap">
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            

            <el-form-item style="height:70px;" label="部门名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item style="height:70px" label="部门ID" prop="id">
                <el-input v-model="ruleForm.id"></el-input>
            </el-form-item>
            <el-form-item style="height:70px" label="部门编号" prop="deptnum">
                <el-input v-model="ruleForm.deptnum"></el-input>
            </el-form-item>

            <el-form-item style="height:70px" label="部门人数" prop="percount">
                <el-input v-model="ruleForm.percount"></el-input>
            </el-form-item>
            <el-form-item style="height:70px" label="部门负责人" prop="depthead">
                <el-input v-model="ruleForm.depthead"></el-input>
            </el-form-item>
            <el-form-item style="height:70px" label="负责人电话" prop="headphone">
                <el-input v-model="ruleForm.headphone"></el-input>
            </el-form-item>

            <el-form-item style="height:70px" label="备注" prop="remark">
                <el-input type="textarea" v-model="ruleForm.remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import ajax from '@/utils/myajax';
import $ from 'jquery';
import axios from 'axios';
export default {
    components: { Pagination },
    data() {
        return {
          
            listQuery: {
                pageNo: 1,
                pageSize: 10
            },
            ruleForm: {
                name: '',
                percount: '',
                remark: '',
                id: '',
                depthead:'',
                headphone:'',
                deptnum:''
            },
            rules: {
                name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                percount: [{ required: true, message: '请输入部门人数数量', trigger: 'blur' }],
                id: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
                depthead: [{ required: true, message: '请输入部门负责人', trigger: 'blur' }],
                headphone: [{ required: true, message: '请输入负责人电话号码', trigger: 'blur' }],
                deptnum: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
            }
        };
    },
    methods: {
      
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let me = this;
                    

                    ajax('department/add_department', this.ruleForm, function(data) {
                        me.$message({
                            title: '成功',
                            message: "创建成功",
                            type: 'success'
                        });
                        (me.ruleForm.name = ''),
                            me.ruleForm.headphone = '',
                            me.ruleForm.percount = '',
                            me.ruleForm.depthead = '',
                            me.ruleForm.id = '',
                            me.ruleForm.remark = '';
                             me.ruleForm.deptnum = '';
                    });
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    created() {
        
    }
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 94%;
    height: 650px;
    margin-left: 2%;
    padding-top: 100px;
    padding-left: 50px;
}
</style>